<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			.wrap {
				margin: 20px auto;
				width: 1200px;
				border: 2px solid #000000;
				/* display: flow-root; */ /*能让父元素感知到子元素的高度*/
				/* 	overflow: hidden; */
			}
			.wrap::after {
				content: '';
				display: block;
				clear: both;
			}
			.inner {
				width: 400px;
				height: 400px;
				font-size: 50px;
			}
			.inner:first-child {
				background-color: pink;
				float: right;
			}
			.inner:nth-child(2) {
				background-color: gold;
				height: 500px;
					float: right;
				/* float: left; */
			}
			.inner:last-child {
				background-color: #FF6700;
				height: 500px;
					float: right;
				
			}
			.clear {
				clear:both; /*清除浮动*/
			}
		</style>
	</head>
	<body>
		<!-- 浮动
		 块级元素独占一行，行内元素在一样显示 ：遵循文档流
		 浮动：左浮动和右浮动
		   float ：left /right
		   
		   1、浮动以后脱离文档流(在文档中的位置失去了，会重叠),水平排列
		   2、浮动后碰到父元素的边界或者其他浮动元素停止
		   3、浮动起来的元素只有一个层
		   4、浮动后所有的元素变成块级元素
		   5、右浮动会导致顺序问题
		   5、所有子元素都浮动或者绝对定位以后，父元素如果没有设置固定高度，高度会丢失（高度塌陷）
			  需要清除浮动（给父元素找回高度）
			  1）在受影响的元素后面加个空的div，给他设置clear:both; /*清除浮动*/
			  2）给受影响的父元素加overflow属性
			  3）给受影响的父元素加display: flow-root; /*能让父元素感知到子元素的高度*/
			  4) 给受影响的父元素加after 伪类，给伪类设置display：bloac; clear:both;
		 -->
		 
		<div class="wrap">
		 	<div class="inner">第一个</div>
			<div class="inner">第二个</div>
			<div class="inner">第三个</div>
		 </div>
		<!-- <div class="clear"></div> -->
		 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum tenetur perspiciatis totam sint labore consequuntur impedit possimus earum expedita delectus aliquid laboriosam neque corrupti omnis fugiat laudantium itaque veniam atque.</p>
		<!-- <div class="wrap">
		 	<span class="inner">第一个</span>
			<span class="inner">第二个</span>
			<span class="inner">第三个</span>
		 </div> -->
	</body>
</html>
